import React, { useEffect, useRef, useContext, useState, useCallback, useMemo, useLayoutEffect } from 'react';
import { ActivityIndicator, Alert, Dimensions, FlatList, ImageBackground, InteractionManager, ScrollView, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { fetchBookmark } from '../util/HttpUtil';
import Loading from './Loading';
let resData = []
import axios from 'axios';
import { loadAllCollect, removeCollect, saveCollect } from '../util/StorageUtil';

const width = Dimensions.get('window').width
export class Collect extends React.Component {
    // const[isFirstFetch, setIsFirstFetch] = useState(false)
    // const [fetchCount, setFetchCount] = useState(0)
    count = 0
    state = {
        result: [], isFetching: true, isErr: false
    }

    componentDidMount() {
        // saveCollect(this.state.result[1])
        loadAllCollect().then((res)=>{
            // console.log("loadAllCollect",res);
            this.setState({ result: res })
        })
        // InteractionManager.runAfterInteractions(() => {
        //     this.body = this.props.route.params
            
        // });
        
        // this.fetchData(this.body)
        // this.fetchData(this.body)
        // this.fetchData(this.body)
    }
    

    getDesc = (desc) => {
        if (desc && desc.indexOf('\n\n') != -1) {
            desc = desc.substring(desc.indexOf('\n\n'))
            desc = desc.replace(/\n\n/, '\n')
            return desc.substring(desc.indexOf(''))
        }
        return null
    }


    render() {
        return (
            <SafeAreaView style={{ flex: 1 }}>
                <ImageBackground style={{ flex: 1, opacity: 0.2, position: 'absolute', width: '100%', height: '100%' }} source={require('../../img/b1.jpg')}>

                </ImageBackground>

                <TouchableOpacity
                    style={{ padding: 10, position: 'relative', left: 0, top: 0, bottom: 0, alignItems: 'center', justifyContent: 'flex-start', alignSelf: 'flex-start' }}
                    onPress={() => {
                        this.props.navigation.goBack()
                    }}>
                    <Ionicons name="chevron-back-outline" size={28} color={'#262626'} />
                </TouchableOpacity>

                <FlatList
                    contentContainerStyle={{ paddingBottom: 30 }}
                    
                    // contentContainerStyle={{justifyContent:'center',}}
                    // getItemLayout={(data, index) => (
                    //     { length: 50, offset: 50 * index, index }
                    // )}
                    ListEmptyComponent={()=>(
                        <Text style={{margin:18}}>暂无收藏</Text>
                    )}
                    renderItem={({ item, index }) => (
                        <TouchableOpacity
                            onPress={() => {
                                item.isCollect = true
                                this.props.navigation.navigate("NameDetail", { item })

                            }}
                            style={{ justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row', width: "96%", padding: 14, marginVertical: 5, marginHorizontal: 'auto' }}>
                            <Text style={{ fontSize: 20 }}>{item?.xm}</Text>
                            <Ionicons onPress={()=>{

                                Alert.alert(
                                    "提示",
                                    "是否删除"+item.xm+"?",
                                    [
                                        { text: "取消", style: 'cancel' },
                                        {
                                            text: "删除", onPress: () => {
                                                removeCollect(item.xm)
                                                loadAllCollect().then((res)=>{
                                                    console.log("loadAllCollect",res);
                                                    this.setState({ result: res })
                                                })
                                            }
                                        },
                                    ],
                                )
                            }} name="close-outline" size={20} color={'#000'} />
                            {/* <Text numberOfLines={5}>{this.getDesc(item?.jx)}</Text> */}
                        </TouchableOpacity>
                    )}
                    data={this.state.result ? this.state.result : []} />
                {/* <ScrollView>
                        <Text>{result?.jx}</Text>
                    </ScrollView> */}
            </SafeAreaView>


        )
    }
}